<script setup lang='ts'>
let props = defineProps<{
  name: string
  size?: number 
}>()

const getAvatarStyle = (name: string) => {
  const charCode = name.charCodeAt(0) || 65;
  const avatarSize = props.size || 24; 
  return {
    background: `linear-gradient(45deg, 
      hsl(${(charCode * 13) % 360}, 65%, 65%),
      hsl(${(charCode * 17) % 360}, 65%, 65%))`,
    width: `${avatarSize}px`,          
    height: `${avatarSize}px`,
    fontSize: `${avatarSize * 0.5}px`  
  };
};

</script>

<template>
  <div class="avatar-container" :style="getAvatarStyle(props.name)">
    {{ props.name?.charAt(0) || 'A' }}
  </div>
</template>

<style scoped lang='scss'>
.avatar-container {
  border-radius: 50%;
  color: white;
  font-weight: 500;
  font-family: "Microsoft Yahei";
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;          
  user-select: none;       
}
</style>